<template>
  <el-dialog custom-class="simple-dialog" width="3.63rem" v-model="visible" :modal="false" draggable>
    <template #title>
      <span class="dialog-title">{{ title }}</span>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
    <div class="dialog-content">
      <slot></slot>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
const emit = defineEmits(['change', 'cancel', 'confirm']);
defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '标题',
  },
});

const onConfirm = () => {
  emit('confirm');
  emit('change', false);
};
const onCancel = () => {
  emit('cancel');
  emit('change', false);
};
</script>

<style lang="scss" scoped>
.dialog-title {
  display: block;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: bold;
}

.dialog-content {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: none;
  border-right: none;
  margin: 0;
}
</style>
<!-- TODO: scope样式设置失败，后续合并到rebuild.css -->
<style>
.el-dialog__body {
  padding: 0;
}
</style>
